<template>
  <section id="semester">
    <section class="btn-list" ref="btnList">
      <a-button @click="handleAddSemester">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加学期</p>
      </a-button>
      <a-button>
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>删除学期</p>
      </a-button>
      <a-button v-show="currentSemester">
        <p>{{ '当前学期：' + currentSemester }}</p>
      </a-button>
    </section>
    <section class="semester-list list">
      <a-table :columns="columns"
               :scroll="{ y: 640 }"
               :data-source="data"
               :loading="isLoading"
               :row-selection="{selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
               :rowKey="(record, index) => record.id"
               :pagination="false"
               :class="isEmpty ? '' :'empty'">
        <template #action="{record}">
          <section class="operation" ref="operation">
            <span @click="handleEditFunctionData(record)">编辑</span>
            <span @click="handleDeteleAwardsData(record)">删除</span>
          </section>
        </template>
      </a-table>
    </section>
  </section>
  <a-modal v-model:visible="visibleAddSemester" :footer="null" :getContainer="$refs.btnList" class="edit-model"
           :onCancel="handleExitAddSemester">
    <section class="edit-model-header">
      <h1>编辑学期管理</h1>
      <h2>Editing semester management</h2>
    </section>
    <section class="edit-model-body">
      <a-input v-model:value="addSemester.week_length" placeholder="学期周数"/>
      <aside class="select-semester">
        <a-select v-model:value="addSemester.semester" placeholder="上下学期">
          <a-select-option value="3">请选择学期</a-select-option>
          <a-select-option value="0">上学期</a-select-option>
          <a-select-option value="1">下学期</a-select-option>
        </a-select>
      </aside>
      <section>
        <a-date-picker placeholder="请选择学期开始日期" v-model:value="addSemester.start_time"
                       :format="format" @change="startTimeChange"
                       suffixIcon=" "
                       :showToday="false"
                       :allowClear="false"
        />
      </section>
      <section>
        <a-date-picker placeholder="请选择学期结束日期" v-model:value="addSemester.end_time"
                       :format="format" @change="endTimeChange"
                       suffixIcon=" "
                       :showToday="false"
                       :allowClear="false"
        />
      </section>
    </section>
    <section class="edit-model-footer">
      <a-button @click="handleExitAddSemester">取消</a-button>
      <a-button @click="handleConfirmAddSemester" :loading="load">确认</a-button>
    </section>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, onMounted, reactive, computed, toRefs} from 'vue'

export default defineComponent({
  name: "index",
  setup() {
    const {proxy} = getCurrentInstance()
    let data = ref([])
    const format = 'YYYY-MM-DD'
    let isLoading = ref(true)
    let isEmpty = ref(false)
    let load = ref(false)
    let visibleAddSemester = ref(false)
    let currentSemester = ref('')
    const columns = [
      {
        title: '学期周数',
        dataIndex: 'week_length',
        key: 'week_length',
      },
      {
        title: '开始日期',
        dataIndex: 'start_time',
        key: 'start_time',
      },
      {
        title: '结束日期',
        dataIndex: 'end_time',
        key: 'end_time',
      },
      {
        title: '学期名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '操作',
        dataIndex: '',
        key: 'x',
        slots: {
          customRender: 'action',
        },
      },
    ];
    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };
    let addSemester = reactive({
      start_time: '',
      end_time: '',
      semester: '3',
      week_length: '',
    })

    onMounted(() => {
      proxy.$request(proxy.$getRoute(98).route_method, proxy.$getRoute(98).route_url, {}).then(res => {
        data.value = res.data
        isLoading.value = false
        if (!data.value.length) isEmpty.value = true
      })
      proxy.$request(proxy.$getRoute(96).route_method, proxy.$getRoute(96).route_url, {}).then(res => {
        currentSemester.value = res.data.name
      })
    })

    const handleAddSemester = () => {
      visibleAddSemester.value = true
    }
    const handleStartChange = (date) => {
      console.log(date);
    };
    const handleExitAddSemester = () => {
      visibleAddSemester.value = false
      addSemester.semester = '3'
      addSemester.end_time = ''
      addSemester.start_time = ''
      addSemester.week_length = ''
      console.log(addSemester.start_time);
    }
    const handleConfirmAddSemester = () => {
      console.log(addSemester);
    }
    const startTimeChange = (date, dateString) => {
      addSemester.start_time = dateString
      console.log(addSemester.start_time);
    }
    const endTimeChange = (date, dateString) => {
      addSemester.end_time = dateString
      console.log(addSemester.end_time);
    }

    return {
      data,
      isLoading,
      isEmpty,
      format,
      load,
      columns,
      hasSelected,
      ...toRefs(state),
      onSelectChange,
      handleAddSemester,
      handleStartChange,
      handleExitAddSemester,
      handleConfirmAddSemester,
      startTimeChange,
      endTimeChange,
      currentSemester,
      visibleAddSemester,
      addSemester
    }
  }
})
</script>

<style lang="less">
@selectColor: #6777EF;
#semester {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
    gap: 4px;
  }

  .btn-list > button:last-child {
    width: 280px;
  }

  .btn-list > button:hover p {
    color: @selectColor;
  }

  .btn-list > button:hover path {
    stroke: @selectColor;
  }


  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .list {
    margin-bottom: 50px;
    border-radius: 6px;
    overflow: hidden;
  }

  .list h1 {
    font-weight: bold;
    font-size: 24px;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
    text-align: center;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .ant-table-tbody > tr > td {
    padding: 15px 44px;
    border: none;
    cursor: pointer;
    position: relative;
    background: #fff;
    text-align: center;
  }


  .empty .ant-empty {
    display: none !important;
  }

  .empty .ant-table-placeholder {
    height: 100px;
  }

  .ant-table-body::-webkit-scrollbar {
    width: 10px;
  }

  .ant-table-body .ant-table-selection-column {
    padding: 0;
  }

  //修改 滚动条的 下面 的 样式
  .ant-table-body::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .ant-table-body::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .operation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 58px;
  }

  .operation span {
    font-weight: bold;
    font-size: 14px;
  }

  .operation span:first-child {
    color: #6777EF;
  }

  .operation span:last-child {
    color: #EB5757;
  }


  .edit-model {
    width: 332px !important;
    min-height: 286px;
    box-sizing: border-box;
  }

  .edit-model .ant-modal-body > section {
    width: 100%;
  }

  .edit-model .edit-model-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    text-align: center;
    margin-bottom: 2px;
  }

  .edit-model .edit-model-header h2 {
    font-size: 14px;
    font-weight: bold;
    color: #D9D9D9;
    line-height: 14px;
    text-transform: uppercase;
    text-align: center;
  }

  .edit-model .edit-model-body {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-content: space-around;
  }

  .edit-model .edit-model-body input {
    width: 268px;
    height: 40px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px 6px 6px 6px;
  }

  .edit-model .edit-model-body p {
    color: #E0E0E0;
  }

  .edit-model .edit-model-body > span {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
  }

  /*  .edit-model .edit-model-body > section {
      width: 268px;
      height: 40px;
      line-height: 40px;
      background: rgba(207, 207, 207, 0.1);
      border-radius: 6px 6px 6px 6px;
      box-sizing: border-box;
      margin: 0;
      font-variant: tabular-nums;
      list-style: none;
      font-feature-settings: 'tnum';
      position: relative;
      display: inline-block;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      border: 1px solid #d9d9d9;
      transition: all 0.3s;
      text-indent: 10px;
      cursor: pointer;
    }*/

  .ant-upload.ant-upload-drag {
    background: #262626;
    border: none;
  }

  .ant-upload.ant-upload-drag .ant-upload {
    padding: 0;
  }

  .edit-model .edit-model-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
  }

  .edit-model .edit-model-footer button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    border: none;
    border-radius: 4px;
  }

  .edit-model .edit-model-footer button:first-child {
    background: #F2F3F5;
    color: #000;
  }

  .edit-model .edit-model-footer button:last-child {
    color: #fff;
    background: #6777EF;
  }

  .edit-model aside {
    width: 100%;
  }

  .select-semester .ant-select,
  .select-semester .ant-select-selector {
    width: 100%;
    height: 40px;
    border-radius: 6px 6px 6px 6px;
  }

  .select-semester .ant-select-selector {
    background: rgba(207, 207, 207, 0.1);
  }

  .select-semester .ant-select-selection-item {
    line-height: 40px;
  }

  .select-start-time {
    width: 268px;
    border-radius: 4px;
    z-index: 100;
    top: 340px;
  }

  .select-start-time .ant-modal-content {
    background: none;
    box-shadow: none;
  }

  .select-start-time .ant-modal-body > div {
    background: #fff;
    border-radius: 6px;
    border: solid 1px #d9d9d9;
  }
}
</style>
